<template>
    <div class="pageMain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="确认订单" left-arrow @click-left="toBack" />
        </div>

        <div class="content">

            <div class="address">
                <img src="../../assets/order/submit_icon1.png" class="address-img">
                <div class="address-con">
                    <div class="address-infor" v-if="isAddr" @click="toChoose">
                        <div class="address-receiver">
                            <span class="address-name text-oneline">{{ address.userName }}</span>
                            <span class="address-tel text-oneline">{{ address.userTel }}</span>
                        </div>
                        <div class="address-text text-oneline">
                            <span>地址 : </span>
                            <span>{{ address.userAddr }}</span>
                        </div>
                        <div class="address-edit-icon">
                            <img src="../../assets/order/submit_icon2.png">
                            <span>修改</span>
                        </div>
                    </div>

                    <!-- 暂无地址 -->
                    <div class="address-infor" v-else @click="toChoose">
                        <div class="address-receiver">
                            <div class="no-address">暂无默认地址,点击添加</div>
                        </div>
                        <div class="address-edit-icon">
                            <img src="../../assets/order/submit_icon2.png">
                            <span>添加</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="product">
                <div class="product-title">商品列表</div>
                <div class="product-infor" v-for="(item, index) in product" :key="index" v-bind:value="item.product_id"
                    :class="{ active: item.manjianSt == 0 }">
                    <img :src="path + 'zhenghui/format/' + item.formatImg" class="product-img">
                    <div>
                        <div class="product-name text-oneline">{{ item.productName }}</div>
                        <div class="product-spec text-oneline">规格 : <span>{{ item.formatName }}</span></div>
                    </div>
                    <div class="product-money">
                        <div class="product-price">
                            ￥{{ myGrade == 4 && currTotal == 0 && !isSpecialProduct ? item.formatSpecial :
                item.newPrice }}

                        </div>
                        <div class="product-number">x<span>{{ item.productNum }}</span></div>
                    </div>
                </div>
                <div class="product-list">
                    <div class="product-items" style="margin-top: 20px;" v-if="!isSpecialProduct">
                        <div class="product-items-title color-red" v-if="myGrade != 4">会员购买商品可享5折优惠</div>
                        <div class="product-items-title color-red" v-if="myGrade == 4">股东使用微信支付购买，可享股东专享价</div>
                    </div>
                    <div class="product-items" style="margin-top: 20px;">
                        <div class="product-items-title">商品总额 :</div>
                        <div class="product-items-text color-red">
                            {{ myGrade == 4 && currTotal == 0 && !isSpecialProduct ? gudongPrice : total }}
                        </div>
                    </div>
                    <div class="product-items">
                        <div class="product-items-title">配送方式 :</div>
                        <div class="product-items-text">{{ post_style }}{{ used_post }}</div>
                    </div>

                    <template v-if="!isSpecialProduct">
                        <div class="product-items" id="payBtn" v-if="isEnough" @click="show = true">
                            <div class="product-items-title">储值金购买 :</div>
                            <div class="product-items-text">
                                <span class="product-items-text color-red">{{ currTotal }}</span>
                                <span class="mui-icon mui-icon-arrowright "></span>
                            </div>
                        </div>
                    </template>
                    <template v-if="isSpecialProduct && ishaveCoupon">
                        <div class="product-items" id="payBtn" @click="show = true">
                            <div class="product-items-title">可用优惠券 :</div>
                            <div class="product-items-text">
                                <span class="product-items-text color-red">{{ isUseCoupon == 1 ? '使用优惠券' : '暂不使用'
                                    }}</span>
                                <span class="mui-icon mui-icon-arrowright "></span>
                            </div>
                        </div>
                    </template>


                    <div class="product-items">
                        <div class="product-items-title">微信实付金额 :</div>
                        <div class="product-items-text color-red">￥<span>{{ totalReal }}</span></div>
                    </div>
                    <div class="product-items">
                        <div class="product-items-title">储值金实付金额 :</div>
                        <div class="product-items-text color-red">￥<span>{{ currTotal }}</span></div>
                    </div>

                    <div class="product-items" id="payBtn">
                        <div class="product-items-title">支付方式 :</div>
                        <div class="product-items-text">
                            <span>{{ currTotal == 0 ? '微信支付' : '储值金抵扣' }} </span>
                            <!-- <span class="mui-icon mui-icon-arrowright"></span> -->
                        </div>
                    </div>

                    <div class="product-msg">
                        <div class="product-items-title">留言 :</div>
                        <input type="text" placeholder="给卖家留言" v-model="note" />
                    </div>
                </div>
            </div>

            <div class="settlement">
                <div class="settlement-text">
                    <p class="settlement-number">共<span>{{ proNums }}</span>件 , </p>
                    <p class="settlement-money">合计:<span class="settlement-price">￥<span>{{ totalReal }}</span></span>
                    </p>
                </div>
                <div class="settlement-btn" @click="toSub">提交订单</div>
            </div>
            <!-- /结算 -->

            <van-popup v-model="show" position="bottom">
                <div class="alert-title">选择付款方式</div>
                <div class="alert-btn" @click="show = false">确定</div>
                <div class="alert-list">
                    <van-radio-group v-model="payWay" v-if="!isSpecialProduct">
                        <van-cell-group>
                            <van-cell title="储值金支付" clickable @click="choosePay(1)">
                                <template #right-icon>
                                    <van-radio name="1" checked-color="#FE4545" />
                                </template>
                            </van-cell>
                            <van-cell clickable @click="choosePay(0)">
                                <template #title>
                                    不使用储值金
                                </template>
                                <template #right-icon>
                                    <van-radio name="2" checked-color="#FE4545" />
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>


                    <van-radio-group v-model="isUseCoupon" v-else>
                        <van-cell-group>
                            <van-cell title="使用优惠券" clickable @click="choosePay(1)">
                                <template #right-icon>
                                    <van-radio name="1" checked-color="#FE4545" />
                                </template>
                            </van-cell>
                            <van-cell clickable @click="choosePay(0)">
                                <template #title>
                                    不使用优惠券
                                </template>
                                <template #right-icon>
                                    <van-radio name="2" checked-color="#FE4545" />
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                </div>
            </van-popup>

        </div>

    </div>

</template>

<script>

import { alPath } from "../../network/request";

import { listMain } from '../../network/recharge'

import { listActMain, addOrder, pay } from '../../network/order'

export default {
    name: 'HomeR',
    data() {
        return {
            path: alPath,
            user_id: localStorage.userId,
            shop_id: localStorage.shopId,
            address: "",
            defultAddr: "",
            productList: [],
            isAddr: false,
            product: [],

            flag: localStorage.pay_style,

            realTotal: 0.0,

            post_style: '快递：￥:',
            shop: '',
            proNums: '',
            ids: '',
            nums: '',
            names: '',
            formatIds: '',
            pics: '',
            prices: '',
            productShopId: [],

            ifFree: '',
            note: '',

            payStyle: 'wxpay',
            paystyle: '微信支付',
            orderList: [],
            isToogle: false,
            shopName: '',
            used_post: 0,

            total: 0, // 总金额
            totalReal: 0, // 总金额
            totalNum: 0,  //总数量


            userStoredNum: 0,//用户的储值金

            payWay: '1',// 1 微信支付  2 储值金支付,

            show: false,//支付方式弹窗

            isEnough: false,//用户 储值金是否够支付商品
            currTotal: 0.0,  // 使用的储值金
            userStore: '',
            parentId: JSON.parse(localStorage.user).referrerId || 0,



            isSpecialProduct: false,


            isUseCoupon: '0',// 0 不使用  1 使用

            ishaveCoupon: false,
            userInfo: '',

            myGrade: 0,//我的当前会员等级

            gudongPrice: 0,//股东总价

            isHalfPrice: false


        }
    },
    mounted() {

    },
    methods: {

        toBack() {
            this.$router.go(-1)
        },


        showHandle(flag) {
            if (flag == 1) {
                this.shop = true
            } else {
                if (this.ishaveCoupon) {
                    this.shop = true
                } else {
                    this.$toast('暂无可用优惠券')
                }
            }
        },


        getMyData() {
            listActMain({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.ishaveCoupon = res.data.act.isCoupon == 1
                    this.userInfo = res.data.act
                    if (this.ishaveCoupon) {
                        this.isUseCoupon = '1'
                        this.totalReal = this.total - 1828;
                    }
                }
            })

        },

        choosePay(val) {
            console.log(val);
            if (!this.isSpecialProduct) {

                if (val == 0) {
                    //不适用
                    this.totalReal = this.isHalfPrice ? (this.total / 2) : this.total;
                    this.currTotal = 0;
                    if (this.myGrade == 4) {
                        this.totalReal = this.gudongPrice;
                    }

                    this.payWay = '2'
                } else {
                    this.totalReal = this.currTotal;
                    this.currTotal = (this.total / 2).toFixed(2);
                    this.payWay = '1'
                }
            } else {
                if (val == 0) {
                    //不适用
                    this.totalReal = this.total;
                    this.isUseCoupon = '2'
                } else {
                    this.totalReal = this.total - 1828;
                    this.isUseCoupon = '1'
                }
            }
            this.show = false


        },
        toChoose: function () {
            localStorage.add_flag = 1;
            this.$router.push('/address')
        },
        listPro: function () {
            console.log(this.myGrade);
            this.product = JSON.parse(localStorage.product);

            this.isSpecialProduct = this.product.some(item => {
                return item.productFlag == 1
            })
            var that = this;
            var productIds = [];
            var nums = [];
            var formatIds = [];
            var prices = [];
            var productNames = [];
            var productPics = [];
            var proNums = 0;
            this.product.forEach(function (pro) {
                proNums += pro.productNum
                productIds.push(pro.productId)
                nums.push(pro.productNum);
                productNames.push(pro.productName)
                formatIds.push(pro.formatId);
                productPics.push(pro.formatImg);
                prices.push(Number(pro.newPrice));
                if (that.myGrade == 4) {
                    that.gudongPrice += (pro.formatSpecial) * (pro.productNum)
                }
                that.total += (pro.newPrice) * (pro.productNum)
            })

            // 是否半价
            this.isHalfPrice = !this.isSpecialProduct && this.myGrade != 0

            if (this.isHalfPrice) {
                this.totalReal = this.total / 2;
            } else {
                this.totalReal = this.total;
            }

            console.log(this.total);
            this.isEnough = this.userStoredNum >= (this.total / 2);
            if (this.isEnough && !this.isSpecialProduct) {
                if (this.myGrade != 4) {
                    this.currTotal = (this.total / 2).toFixed(2);
                    this.totalReal = 0;
                } else {
                    this.currTotal = 0
                    this.totalReal = this.gudongPrice
                    this.payWay = '2'
                }

            }

            console.log(this.product);
            console.log(this.isSpecialProduct);

            if (this.isSpecialProduct) {
                if (this.product[0].product_id == 2134) {
                    this.getMyData()
                }
            }

            this.ids = productIds.toString();
            this.proNums = proNums.toString();
            this.nums = nums.toString();
            this.formatIds = formatIds.toString();
            this.prices = prices.toString();
            this.names = productNames.toString();
            this.pics = productPics.toString();
        },


        toSub: function () {
            if (this.address == "") {
                this.$toast("请选择地址~");
                return false;
            }
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: `是否${this.totalReal == 0 ? '使用储值金' : ''}购买该商品`,
                confirmButtonText: '确认',
            })
                .then(function () {
                    var yhMoney = that.isUseCoupon == 1 ? 1828 : 0, flag = 0;
                    if (that.isSpecialProduct) {
                        flag = that.userInfo.isFirst == 0 ? -1 : that.isUseCoupon == 1 ? -2 : that.parentId
                    }
                    var obj = {
                        userId: that.user_id,
                        shopId: that.shop_id,
                        userName: that.address.userName,
                        userTel: that.address.userTel,
                        userAddr: that.address.userAddr,
                        totalMoney: that.total,
                        realMoney: that.totalReal,
                        usedStored: that.currTotal,
                        payWay: that.currTotal == 0 ? '微信支付' : '储值金抵扣',
                        usedYh: yhMoney,  // 优惠金额，优惠券金额
                        parentId: flag, // 没有传0，如果是3650活动的首次购买鸡胚胎，传-1，用券购买传-2
                        orderList: [],
                    }
                    that.product.forEach(item => {
                        obj.orderList.push({
                            productId: item.productId,
                            formatId: item.formatId,
                            productPrice: that.myGrade == 4 ? item.formatSpecial : item.formatPrice,
                            productNum: item.productNum,
                            productName: item.productName,
                            formatName: item.formatName,
                            formatImg: item.formatImg,
                        })
                    })

                    console.log(obj);

                    addOrder(obj).then(res => {
                        if (res.flag) {
                            localStorage.removeItem("product");
                            if (that.totalReal > 0) {
                                console.log(res.data);
                                that.wxpay(res.data.orderNum, that.totalReal, res.data.rebate, flag);
                            } else {
                                that.$dialog.alert({
                                    title: '恭喜您，尊贵的会员',
                                    message: '已使用储值金购买该商品',
                                    theme: 'round-button',
                                    confirmButtonText: '我已知道'
                                })
                                    .then(function () {
                                        localStorage.order_index = "1";
                                        that.$router.push('/orderList')
                                    })
                            }
                        } else {
                            if (data.flag == "false") {
                                that.$toast("库存不足，请联系店家~");
                                return false;
                            } else {
                                that.$toast("提交订单失败");
                            }
                        }
                    })
                })
        },


        wxpay(order_num, sum, rebate, flag) {
            localStorage.sum = sum;
            localStorage.order_num = order_num;
            pay({
                userId: localStorage.userId,
                shopId: localStorage.shopId,
                orderNumber: order_num,
                parentId: flag,
                realMoney: sum,
                rebate: rebate,
                flag: 0,
                openId: 0,
                ifDown: 0,
            }).then(res => {
                if (res.flag) {
                    
                    console.log(res);
                    this.payHandle(res.data)
                } else {
                    this.payError()
                }
            })
        },




        getData() {
            listMain({
                userId: localStorage.userId,
                shopId: localStorage.shopId
            }).then(res => {
                if (res.flag) {
                    this.myGrade = res.data.userStored.vipGrade
                    this.userStoredNum = res.data.userStored.totalStored
                    this.myGrade = 2
                    this.userStoredNum = 10000
                    this.listPro();
                }
            })

        },


        //获取微信支付参数成功的回调函数
        payHandle: function (resObj) {
            console.log(resObj);
            var str = JSON.stringify(resObj.finalPackage);
            console.log(str);
            var that = this;
            //用返回参数 发起微信支付请求 
            plus.payment.request(wxChannel, str, function (data) {
                plus.ui.alert("支付成功!", function () {
                    that.$toast('支付成功')
                    localStorage.order_index = "1";
                    that.$router.push('/orderList')
                })
            }, function (error) {
                console.log(JSON.stringify(error));
                that.$toast("支付失败");
            });
        },
        //获取微信支付参数失败的回调函数
        payError: function (e) {
            console.log(JSON.stringify(e));
            this.$toast("获取参数失败，请重试");
        },


    },
    created() {
        this.getData()
        if (localStorage.address) {
            this.isAddr = true
            this.address = JSON.parse(localStorage.address)
        } else {
            this.isAddr = false
        }
        // this.getAddress();
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

.pagemain {
    background: #f2f2f2;
    height: 100vh;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}






.content {
    padding-top: 114px !important;
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    overflow-x: hidden;
}

.text-oneline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* @address 地址选择
----------------------------------------------------------*/
.address {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background: #FFFFFF;
    padding: 40px 24px 40px 116px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.address-img {
    position: absolute;
    top: 40px;
    left: 24px;
    display: block;
    width: 66px;
    height: 66px;
}

.address-con {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 66px;
}

.address-text {
    width: 100%;
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.address-edit-icon {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.address-edit-icon img {
    display: block;
    width: 24px;
    margin-right: 8px;
}

.address-edit-icon span {
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.address-infor {
    position: relative;
    width: 100%;
    height: 66px;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-receiver {
    line-height: 1;
}

.address-receiver span {
    display: inline-block;
    font-size: 28px;
    color: #333;
}

.address-receiver .address-name {
    max-width: 5em;
}

.address-receiver .address-tel {
    max-width: 8em;
}

.no-address {
    position: absolute;
    top: 0;
    font-size: 24px;
    color: #999;
    width: 100%;
    left: 0;
    text-align: center;
    height: 66px;
    line-height: 66px;
    padding-right: 90px;
}

/* @shop 门店选择
----------------------------------------------------------*/
.shop {
    width: 100%;
    height: 238px;
    overflow: hidden;
    -webkit-transition: all .2s;
    transition: all .2s;
    margin-bottom: 24px;
    padding: 24px 24px;
    border-radius: 16px;
    background: #FFFFFF;
}

.shop-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.shop-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.shop-title img {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 24px;
}

.shop-title span {
    font-size: 24px;
    color: #333;
}

.shop-bottom {
    position: relative;
    width: 100%;
    padding-top: 48px;
    padding-left: 116px;
}

.shop-icon {
    display: block;
    position: absolute;
    top: 48px;
    left: 0;
    width: 90px;
    height: 90px;
    border: 2px solid #F2F2F2;
    border-radius: 16px;
    object-fit: cover;
}

.shop-address {
    position: relative;
    width: 100%;
    padding-right: 56px;
}

.shop-address .mui-icon {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 24px;
    color: #999;
}

.shop-address-text {
    width: 100%;
    font-size: 24px;
    color: #333;
}

.shop-user-name {
    display: inline-block;
    max-width: 5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28px;
    color: #333;
}

.shop-user-tel {
    display: inline-block;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #999;
}

.shop-user-infor {
    width: 100%;
    line-height: 1;
}

.shop-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 90px;
}

/* @product 商品列表
----------------------------------------------------------*/
.product {
    box-sizing: border-box;
    width: 100%;
    padding: 36px 24px;
    border-radius: 16px;
    background: #FFFFFF;
    margin-bottom: 124px;
}

.product-title {
    width: 100%;
    font-size: 28px;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(181, 181, 181, .2);
}



.product-infor {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 228px;
    padding: 24px 0;
    border-bottom: 2px solid rgba(181, 181, 181, .2);
    padding-left: 204px;
}

.product-img {
    display: block;
    position: absolute;
    top: 24px;
    left: 0;
    width: 180px;
    height: 180px;
    border: 2px solid #F2F2F2;
    border-radius: 16px;
}

.product-name {
    font-size: 24px;
    color: #333;
}

.product-spec {
    font-size: 24px;
    color: #999;
}

.product-money {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    line-height: 1;
}

.product-price {
    font-size: 24px;
    color: #FE4545;
}

.product-number {
    font-size: 24px;
    color: #333;
}

.product-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 48px;
}

.product-items-title {
    font-size: 24px;
    color: #333;
}

.product-items-text {
    font-size: 24px;
    color: #666;
}

.color-red {
    color: #FF3B14;
}

.list-packet {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

input.list-checkbox {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    margin-left: 24px;
    background-image: url(../../assets/order/submit_icon6.png);
    background-size: 100% 100%;
    border: none;
    background-color: transparent;
}

input.list-checkbox:checked {
    background-image: url(../../assets/order/submit_icon7.png);
}

.product-items-text .mui-icon {
    font-size: 24px;
    color: #999;
    margin-left: 18px;
}

.product-msg {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-left: 110px;
    margin-bottom: 36px;
}

.product-msg .product-items-title {
    position: absolute;
    top: 0;
    left: 0;
}

.product-msg input {
    width: 100%;
    padding: 0;
    height: 42px;
    font-size: 24px;
    color: #333;
    line-height: 42px;
    border: none;
    margin-bottom: 0;
}

/* @settlement  结算
----------------------------------------------------------*/
.settlement {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 750px;
    height: 100px;
    border-top: 2px solid #F2F2F2;
    background: #FFFFFF;
    padding-left: 48px;
    padding-right: 24px;
}

.settlement-btn {
    width: 210px;
    height: 74px;
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    font-size: 28px;
    color: #FFFFFF;
    text-align: center;
    line-height: 74px;
    border-radius: 38px;
}

.settlement-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.settlement-number {
    font-size: 24px;
    color: #999;
    margin-bottom: 0;
    line-height: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

.settlement-money {
    font-size: 28px;
    color: #333;
    margin-bottom: 0;
    line-height: 1;
}

.settlement-price {
    color: #FF3B14;
}

.settlement-price span {
    font-size: 36px;
}


.alert-title {
    width: 100%;
    height: 86px;
    font-size: 32px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 86px;
}

.alert-list {
    width: 100%;
    height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.alert-items {
    width: 100%;
    height: 176px;
    padding: 0 24px 24px;
}

.alert-items label {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 32px;
    border: 2px solid #dcdcdc;
    border-radius: 16px;
}

.alert-items label.no-use-coupon {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

input.alert-checkbox {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    margin-left: 24px;
    background-image: url(../../assets/order/submit_icon6.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

input.alert-checkbox:checked {
    background-image: url(../../assets/order/submit_icon7.png);
}

.no-use-text {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}


.alert-btn {
    width: 92px;
    height: 84px;
    position: absolute;
    top: 0px;
    right: 8px;
    line-height: 84px;
    text-align: center;
    font-size: 24px;
    color: #999;
}

.alert-items label.pay-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pay-text {
    font-size: 28px;
    color: #333;
}

.mui-icon-weixin {
    color: rgb(66, 175, 53);
}

.mui-icon-extra-alipay {
    color: rgb(0, 160, 233);
}

.pageMain {
    width: 100%;
    height: 100vh;
    background: #f2f2f2;

}
</style>